<template>
  <div class="home" ref="homeRef">
    <homeNavBar />
    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="" />
    </div>
    <homeSearchBox />
    <homeCategories />
    <div class="search-bar" v-if="isShowSearchBar">
      <searchBar />
    </div>
    <homeContent />
  </div>
</template>

<script>
export default { name: "home" };
</script>
<script setup>
import { watch, computed, ref, onActivated } from "vue";
import homeNavBar from "./cpns/home-nav-bar.vue";
import homeSearchBox from "./cpns/home-search-box.vue";
import useHomeStore from "@/store/modules/home";
import homeCategories from "./cpns/home-categories.vue";
import homeContent from "./cpns/home-content.vue";
import useScroll from "@/hooks/useScroll.js";
import searchBar from "@/components/search-bar/search-bar.vue";

//发送网络请求：热门建议
const homeStore = useHomeStore();
homeStore.fetchHotSuggestsData();
homeStore.fetchCategories();
homeStore.fetchHouselistData();

// 监听滚动到底部
const homeRef = ref();
const { isReachBottom, scrollTop } = useScroll(homeRef);
watch(isReachBottom, (newValue) => {
  if (newValue) {
    homeStore.fetchHouselistData().then(() => {
      isReachBottom.value = false;
    });
  }
});

const isShowSearchBar = computed(() => {
  return scrollTop.value >= 360;
});
// 跳转回home时, 保留原来的位置
onActivated(() => {
  homeRef.value?.scrollTo({
    top: scrollTop.value,
  });
});
</script>

<style lang="less" scoped>
.home {
  padding-bottom: 60px;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  
}
.banner {
  img {
    width: 100%;
  }
}
.search-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 45px;
  padding: 16px 16px 10px;
  background-color: #fff;
  z-index: 99;
}
::-webkit-scrollbar {
  display: none;
}

</style>
